<!--组件-参数-->
<template>
  <div class="bg">

    <!--参数设置-->
    <div class="row acenter">
      <div class="row acenter" @click="showClick(!isShow)">
        <text class="font28 main-t1">{{T('参数设置')}}</text>
        <LImage class="arrow" :src="isShow ? Config.img('xiala_blue_.png') : Config.img('xiala_blue.png')"></LImage>
      </div>
      <div class="all"></div>
      <div class="recommend main1" v-if="isRestore" @click="restoreClick">
        <text class="font24 text1">{{T('重置推荐设置')}}</text>
      </div>
    </div>

    <!--自定义参数-->
    <div v-for="(item, index) in datas" v-bind:key="index">
    
      <VParamGridScatter class="input" v-if="item.ref && item.ref == 'gridScatter'" 
                          :ref="item.ref" 
                          v-model="item.values"
                          :isShow="isShow"
                          @paramChange="onInput"></VParamGridScatter>

      <LInput class="input" v-else-if="!(item.visiable && (math.getNumber(item.visiable) == 0)) && isShow" 
              v-model="item.value" 
              :title="T(item.name)" 
              :comment="T(item.comment)" 
              :limits="getRange(item)" 
              :tips="(item.optional ? T('选填') : item.name)" 
              :unit="T(item.unitName)" 
              @input="onInput"></LInput>
    </div>
    <div class="mantle" v-if="isEdit" @click="click"></div>
  </div>
</template>

<script>

//组件
import LInput from "@/public/view/LInput.vue";
import VParamGridScatter from "@/strategy/view/VParamGridScatter.vue";


//功能
import math from "@/_js/math";
import modal from "@/_js/modal";
import Config from "@/_js/config";

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {

  components: {
    LInput,
    VParamGridScatter,
  },

  model:{
    prop:"isShow",
    event:"change",
  },

  props:{

    isShow:{ //true显示
      type:Boolean,
      default:false,
    },
    
    isEdit:{ //turn不可编辑
      type:Boolean,
      default:false,
    },
    
    isRestore:{ //true显示一键恢复
      type:Boolean,
      default:true,
    },

    reserves:{ //参数数组
      type:Array,
      default:[],
    },

    pairMap:Object, //交易对

    investCoin:String, //投资币
  },
  
  data() {
    return {   
      T:T,   
      math:math,
      Config:Config,
      datas:[], //修改后的数据

      /** 可选数据
       * 价格上限
       * 价格下限
       * */   
      choices:['价格上限', '价格下限'],


      /** 隐藏数据
       * FIX_TYPE 定投类型
       * */ 
      hides:['定投类型'],
    };
  },

  mounted(){
    this.initData();
  },

  methods:{
    
    //初始化数据
    initData() {
      
      //可选参数
      //给特殊数据，添加标识。
      for (let index = 0; index < this.reserves.length; index++) {
        var reserve = this.reserves[index];

        //可选参数
        for (let index = 0; index < this.choices.length; index++) {
          var name = this.choices[index];
          if (reserve.name == name) {
            reserve.optional = true;
            reserve.value = math.getNumber(reserve.value)==0?'':reserve.value;
            break;
          }
        }

        //隐藏参数
        for (let index = 0; index < this.hides.length; index++) {
          var name = this.hides[index];
          if (reserve.name == name) {
            reserve.visiable = '0';
            break;
          }
        }
      }
      
      //处理特殊数据
      for (let index = 0; index < this.reserves.length; index++) {
        var reserve = this.reserves[index];
        reserve.value = reserve.value + '';

        //单位
        if (reserve.valueType && reserve.valueType == 'percent') {
          reserve.unitName = '%';
        }

        //处理价格参数
        if (math.getNumber(reserve.valueMax) != 0 || math.getNumber(reserve.valueMin) != 0) {
            
            var price = this.investCoin == this.pairMap.baseCoin ? this.pairMap.baseCoinUsdPrice : this.pairMap.usdPrice;
            var decimal = this.investCoin == this.pairMap.baseCoin ? this.pairMap.baseCoinDecimal : this.pairMap.counterCoinDecimal;
            
            reserve.start = math.chu(reserve.valueMin, price, decimal, decimal, 2);
            reserve.end = math.chu(reserve.valueMax, price, decimal, decimal, 2);
        }

        //处理可选参数
        if (reserve.optional && math.getNumber(reserve.value) == 0) {
          reserve.value = "";
        }
      }

      //网格分布
      var gridScatter = {'ref':'gridScatter',
                         'values':[]};
      var grid = true;
      this.datas = []; 
      for (let index = 0; index < this.reserves.length; index++) {
        var reserve = this.reserves[index];
        reserve = JSON.parse(JSON.stringify(reserve));

        if (reserve.name == '网格间隔(等比)' || reserve.name == '网格间隔(等差)') {
          gridScatter.values.push(reserve);
          grid && this.datas.push(gridScatter);
          grid = false;
        } else {
          this.datas.push(reserve);
        }
      }
    },

    //刷新视图
    refresh(reserves, pairMap, investCoin){
      this.reserves = reserves;
      this.pairMap = pairMap;
      this.investCoin = investCoin;
      this.initData();
    },

    //检查
    checkError(){
 
      for (let index = 0; index < this.datas.length; index++) {
        var data = this.datas[index];
        
        //自定义组件参数-自己检查自己
        if (data.ref) {
          if (this.$refs[data.ref][0].checkError()) {
            return true;
          }
          continue;
        }
        
        //隐藏数据--不检查
        if(data.visiable && (math.getNumber(data.visiable) == 0)) {
          continue;
        }

        //可选参数--可不输入
        if(data.optional && data.value.length == 0) {
          continue;
        }
        

        if (data.value.length == 0) {
          modal.toast(T('请输入&{1}').replace("&{1}", T(data.name)));
          return true;
        } 
        
        else if (data.start == null || 
                data.start.length == 0 || 
                data.end == null || 
                data.end.length == 0) { } 
        
        else if (
          data.value.length && 
          (math.getNumber(data.value) < math.getNumber(data.start) ||
              math.getNumber(data.value) > math.getNumber(data.end))) {
          modal.toast(T('&{1}不在范围内').replace("&{1}", T(data.name)));
          return true;
        }
      }
      
      return false;
    },
    
    //获取参数
    getParam(){
      
      //处理可选参数
      var optional = (data)=>{
        if (data.optional && data.value.length == 0) {
          data.value = "0";
        } else {
          data.value = Number(data.value) +'';
        }
      };

      var datas = JSON.parse(JSON.stringify(this.datas));
      var params = [];
      for (let index = 0; index < datas.length; index++) {
        var data = datas[index];

        if (data.ref) {
          for (let index = 0; index < data.values.length; index++) { 
            var value = data.values[index];
            optional(value);
            params.push(value);
          }
        } else {
          
          optional(data);
          params.push(data);
        }
      }

      return params;
    },

    //获取指定参数
    getParamz(name){
      
      var datas = JSON.parse(JSON.stringify(this.datas));
      for (let index = 0; index < datas.length; index++) {
        var data = datas[index];

        if (data.ref) {
          for (let index = 0; index < data.values.length; index++) { 
            var value = data.values[index];
            if (value.name == name) {
              return value;
            }
          }
        } else if (data.name == name) {
          return data;
        }
      }
      return null;
    },

    /********************************** Get方法*/
    //获取范围
    getRange(item){

      if (item.start == null || item.start.length == 0 || item.end == null || item.end.length == 0) {
        return null;
      }
      return T('范围')+item.start+'~'+item.end;
    },

    /**********************************************输入框回调*/
    //输入内容改变
    onInput(e){
      this.$emit("paramChange");
    },

    /********************************** 点击触发*/
    //显隐点击
    showClick(isShow){
      this.$emit("change", isShow);
    },

    //还原点击
    restoreClick(){
      //网格分布
      var gridScatter = {'ref':'gridScatter',
                         'values':[]};
      var grid = true;
      this.datas = []; 
      for (let index = 0; index < this.reserves.length; index++) {
        var reserve = this.reserves[index];
        reserve = JSON.parse(JSON.stringify(reserve));

        if (reserve.name == '网格间隔(等比)' || reserve.name == '网格间隔(等差)') {
          gridScatter.values.push(reserve);
          grid && this.datas.push(gridScatter);
          grid = false;
        } else {
          this.datas.push(reserve);
          this.$emit("valueChange", reserve, index);
        }
      }

      // this.datas = JSON.parse(JSON.stringify(this.reserves));
      // for (let index = 0; index < this.datas.length; index++) {
      //   var data = this.datas[index];
      //   this.$emit("valueChange", data, index);
      // }
    },

    //遮挡层，点击遮挡
    click(){
    },
  }
}
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.bg{
  width: 670px;
}
.mantle{
  width: 670px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.arrow{
  width: 20px;
  height: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.recommend {
  flex-direction: row;
  align-items: center;
  height: 48px;
  border-radius: 27px;
  padding-left: 20px;
  padding-right: 20px;
}
.explain{
  width: 28px;
  height: 28px;
  margin-left: 8px;
  margin-right: 8px;
}
.input {
  margin-top: 40px;
}
.height40{
  height: 40px;
}
</style>
